<template>
  <div class="page">
    <mu-flex class="top" justify-content="center">
      <mu-button @click="back" flat class="back">
        <img
          class="back-img"
          src="https://image.xuexiwangzhe.com/Fj7A41cGlmphMwAqlKmfkDf1YmV3"
        />
        <span>账号设置</span>
      </mu-button>
      <mu-avatar :size="66">
        <img :src="baseImgUrl + avatar" />
      </mu-avatar>
    </mu-flex>
    <div class="bottom">
      <div class="bottom-main">
        <mu-flex class="settings-item">
          <div class="title">
            企业/机构名称
          </div>
          <mu-flex
            class="content"
            align-items="center"
            justify-content="between"
          >
            <span>{{ companyName }}</span>
            <img
              class="edit-img"
              src="https://image.xuexiwangzhe.com/Fundpx2DKLLZkKGP-N1i-XmsMmBP"
              @click="modalShow('companyname')"
            />
          </mu-flex>
        </mu-flex>
        <mu-flex class="settings-item">
          <div class="title">
            姓名
          </div>
          <mu-flex
            class="content"
            align-items="center"
            justify-content="between"
          >
            <span>{{ name }}</span>
            <img
              class="edit-img"
              src="https://image.xuexiwangzhe.com/Fundpx2DKLLZkKGP-N1i-XmsMmBP"
              @click="modalShow('name')"
            />
          </mu-flex>
        </mu-flex>
        <mu-flex class="settings-item">
          <div class="title">
            团队备注名
          </div>
          <mu-flex
            class="content"
            align-items="center"
            justify-content="between"
          >
            <span>{{ groupName }}</span>
            <img
              class="edit-img"
              src="https://image.xuexiwangzhe.com/Fundpx2DKLLZkKGP-N1i-XmsMmBP"
              @click="modalShow('groupname')"
            />
          </mu-flex>
        </mu-flex>
        <mu-flex class="settings-item">
          <div class="title">
            手机号
          </div>
          <mu-flex
            class="content"
            align-items="center"
            justify-content="between"
          >
            <span>{{ phone }}</span>
            <img
              class="edit-img"
              src="https://image.xuexiwangzhe.com/Fundpx2DKLLZkKGP-N1i-XmsMmBP"
              @click="modalShow('telephone')"
            />
          </mu-flex>
        </mu-flex>
        <mu-flex class="settings-item">
          <div class="title">
            微信
          </div>
          <mu-flex
            class="content"
            align-items="center"
            justify-content="between"
          >
            <!-- <span v-if="wxShow">{{ wechat }}</span>
            <span v-else>未绑定</span>
            <a v-if="wxShow">解绑</a>
            <a v-else @click="wechatModalShow = true">绑定</a> -->
            <span>{{ wechat }}</span>
          </mu-flex>
        </mu-flex>
      </div>
    </div>
    <!-- 修改企业名称 modal 框 -->
    <mu-dialog
      title="修改企业/机构名称"
      width="470"
      :open.sync="companyNameModalShow"
      :overlay-close="false"
    >
      <mu-form ref="companySubmitForm" :model="companyForm">
        <mu-form-item prop="companyName" :rules="companynameRules">
          <mu-text-field
            v-model="companyForm.companyName"
            label="企业/机构名称"
            label-float
            prop="companyName"
            style="width:100%;"
          ></mu-text-field>
        </mu-form-item>
      </mu-form>
      <mu-button
        class="mu-button-cancel"
        slot="actions"
        flat
        @click="companyNameModalShow = false"
        >取消</mu-button
      >
      <mu-button
        class="mu-button-submit"
        slot="actions"
        flat
        color="primary"
        @click="edit('companyname')"
        >确定</mu-button
      >
    </mu-dialog>
    <!-- 修改姓名 modal 框 -->
    <mu-dialog
      :overlay-close="false"
      title="修改姓名"
      width="470"
      :open.sync="nameModalShow"
    >
      <mu-form ref="nameSubmitForm" :model="nameForm">
        <mu-form-item prop="name" :rules="nameRules">
          <mu-text-field
            prop="name"
            label="姓名"
            label-float
            v-model="nameForm.name"
            style="width:100%;"
          ></mu-text-field>
        </mu-form-item>
      </mu-form>
      <mu-button
        class="mu-button-cancel"
        slot="actions"
        flat
        @click="nameModalShow = false"
        >取消</mu-button
      >
      <mu-button
        class="mu-button-submit"
        slot="actions"
        flat
        color="primary"
        @click="edit('name')"
        >确定</mu-button
      >
    </mu-dialog>
    <!-- 修改团队备注名 modal 框 -->
    <mu-dialog
      :overlay-close="false"
      title="修改团队备注名"
      width="470"
      :open.sync="groupNameModalShow"
    >
      <mu-form ref="groupSubmitForm" :model="groupForm">
        <mu-form-item prop="groupName" :rules="groupnameRules">
          <mu-text-field
            prop="groupName"
            label="团队备注名"
            label-float
            v-model="groupForm.groupName"
            style="width:100%;"
          ></mu-text-field>
        </mu-form-item>
      </mu-form>
      <mu-button
        class="mu-button-cancel"
        slot="actions"
        flat
        @click="groupNameModalShow = false"
        >取消</mu-button
      >
      <mu-button
        class="mu-button-submit"
        slot="actions"
        flat
        color="primary"
        @click="edit('groupname')"
        >确定</mu-button
      >
    </mu-dialog>
    <!-- 修改手机号 modal 框 -->
    <mu-dialog
      :overlay-close="false"
      title="修改手机号"
      width="470"
      :open.sync="telephoneModalShow"
    >
      <mu-form ref="telephoneSubmitForm" :model="telephoneForm">
        <mu-form-item prop="phone" :rules="telephoneRules">
          <mu-text-field
            label="手机号"
            prop="phone"
            label-float
            v-model="telephoneForm.phone"
            style="width:100%;"
          ></mu-text-field>
        </mu-form-item>
      </mu-form>
      <mu-form ref="codeSubmitForm" :model="codeForm">
        <mu-form-item prop="code" :rules="codeRules">
          <mu-text-field
            prop="code"
            label="验证码"
            v-model="codeForm.code"
            label-float
            style="width:50%;"
          ></mu-text-field>
          <a class="getcode" @click="getVerifyCode" v-if="!verifyInterval"
            >获取验证码</a
          >
          <span class="getcode-loading" v-if="verifyInterval"
            >获取验证码({{ verifyTime }})</span
          >
        </mu-form-item>
      </mu-form>
      <mu-button
        class="mu-button-cancel"
        slot="actions"
        flat
        @click="telephoneModalShow = false"
        >取消</mu-button
      >
      <mu-button
        class="mu-button-submit"
        slot="actions"
        flat
        color="primary"
        @click="edit('telephone')"
        >确定</mu-button
      >
    </mu-dialog>
    <!-- 微信绑定 modal 框 -->
    <!-- <mu-dialog :overlay-close="false" width="470" :open.sync="wechatModalShow">
      <div slot="title">
        <img
          src="https://image.xuexiwangzhe.com/Fu0mgT0EvO3rPRgf2jb0IxAgE3cA"
          style="width:20px;"
          @click="wechatModalShow = false"
        />
      </div>
      <div id="wx_qrcode"></div>
      <wxlogin
        :state="'111111'"
        :appid="appid"
        :scope="'snsapi_login'"
        :redirect_uri="redirectUri"
      ></wxlogin>
      <div>微信扫码绑定</div>
      <mu-button
        class="mu-button-submit"
        slot="actions"
        flat
        color="primary"
        @click="edit('telephone')"
        >我已绑定</mu-button
      >
    </mu-dialog> -->
  </div>
</template>
<script>
import { APPID } from "../../../../util/config.js";
// import wxlogin from "vue-wxlogin";
export default {
  data() {
    return {
      baseImgUrl: "https://image.xuexiwangzhe.com/",
      companyNameModalShow: false,
      nameModalShow: false,
      groupNameModalShow: false,
      telephoneModalShow: false,
      wechatModalShow: false,
      wxShow: false,
      appid: APPID,
      redirectUri: encodeURIComponent(
        "https://minitool.xuexiwangzhe.com/minitool/index.html"
      ),
      companynameRules: [
        { validate: (val) => !!val, message: "必须填写企业/机构名称" },
      ],
      nameRules: [{ validate: (val) => !!val, message: "必须填写姓名" }],
      telephoneRules: [{ validate: (val) => !!val, message: "必须填写手机号" }],
      codeRules: [{ validate: (val) => !!val, message: "必须填写验证码" }],
      groupnameRules: [],
      companyForm: {
        companyName: "",
      },
      groupForm: {
        groupName: "",
      },
      nameForm: {
        name: "",
      },
      telephoneForm: {
        phone: "",
      },
      codeForm: {
        code: "",
      },
      companyName: "",
      groupName: "",
      name: "",
      phone: "",
      wechat: "",
      avatar: "",
      verifyInterval: null,
      verifyTime: 0,
    };
  },
  created() {
    this.$axios.get("/user/getUserInfo").then((res) => {
      if (res.success) {
        this.avatar = res.userAvatar;
        this.companyName = res.companyName;
        this.companyForm.companyName = res.companyName;
        this.name = res.userName;
        this.nameForm.name = res.userName;
        this.phone = res.phone;
        this.telephoneForm.phone = res.phone;
        this.groupName = res.teamName;
        this.groupForm.groupName = res.teamName;
        this.wechat = res.nickName;
      } else {
        this.$toast.error(res.msg);
      }
    });
  },
  // components: {
  //   wxlogin,
  // },
  methods: {
    modalShow(val) {
      switch (val) {
        case "companyname":
          this.companyForm.companyName = this.companyName;
          this.companyNameModalShow = true;
          break;
        case "name":
          this.nameForm.name = this.name;
          this.nameModalShow = true;
          break;
        case "groupname":
          this.groupForm.groupName = this.groupName;
          this.groupNameModalShow = true;
          break;
        case "telephone":
          this.telephoneForm.phone = this.phone;
          this.telephoneModalShow = true;
          break;
        default:
          break;
      }
    },
    bindWechat() {
      var obj = new WxLogin({
        self_redirect: false,
        id: "wx_qrcode",
        appid: APPID,
        scope: "snsapi_login",
        redirect_uri: encodeURIComponent(
          "https://minitool.xuexiwangzhe.com/minitool/user.html"
        ),
        state: "111111",
        style: "black",
        href: "",
      });
      this.wechatModalShow = true;
    },
    edit(val) {
      switch (val) {
        case "companyname":
          this.$refs.companySubmitForm.validate().then((result) => {
            if (!result) return;
            this.$axios
              .post("/user/updateCompanyName", {
                companyName: this.companyForm.companyName,
              })
              .then((res) => {
                if (res.success) {
                  this.companyName = this.companyForm.companyName;
                  this.$toast.success("修改成功");
                  this.companyNameModalShow = false;
                } else {
                  this.$toast.error(res.msg);
                }
              });
          });
          break;
        case "name":
          this.$refs.nameSubmitForm.validate().then((result) => {
            if (!result) return;
            this.$axios
              .post("/user/updateName", {
                name: this.nameForm.name,
              })
              .then((res) => {
                if (res.success) {
                  this.name = this.nameForm.name;
                  this.$toast.success("修改成功");
                  this.nameModalShow = false;
                } else {
                  this.$toast.error(res.msg);
                }
              });
          });
          break;
        case "groupname":
          this.$refs.groupSubmitForm.validate().then((result) => {
            if (!result) return;
            this.$axios
              .post("/user/updateTeamName", {
                teamName: this.groupForm.groupName,
              })
              .then((res) => {
                if (res.success) {
                  this.groupName = this.groupForm.groupName;
                  this.$toast.success("修改成功");
                  this.groupNameModalShow = false;
                } else {
                  this.$toast.error(res.msg);
                }
              });
          });
          break;
        case "telephone":
          Promise.all([
            this.$refs.telephoneSubmitForm.validate(),
            this.$refs.codeSubmitForm.validate(),
          ]).then((result) => {
            if (result.includes(false)) return;
            this.$axios
              .post("/user/updatePhone", {
                phone: this.telephoneForm.phone,
                code: this.codeForm.code,
              })
              .then((res) => {
                if (res.success) {
                  this.phone = this.telephoneForm.phone;
                  this.$toast.success("修改成功");
                  this.telephoneModalShow = false;
                } else {
                  this.$toast.error(res.msg);
                }
              });
          });
          break;
        default:
          break;
      }
    },
    getVerifyCode() {
      if (!this.verifyInterval) {
        this.$refs.telephoneSubmitForm.validate().then((result) => {
          if (!result) return;
          const tel = this.telephoneForm.phone;
          const params = { phone: tel };
          this.$axios.get("/register/verifyCode", { params }).then((res) => {
            if (res.success) {
              this.$toast.success("发送验证码成功");
              this.verifyTime = 60;
              this.verifyInterval = setInterval(() => {
                if (this.verifyTime === 0) {
                  clearInterval(this.verifyInterval);
                  this.verifyInterval = null;
                } else this.verifyTime -= 1;
              }, 1000);
            } else {
              this.$toast.error(res.msg);
            }
          });
        });
      }
    },
    back() {
      history.go(-1);
    },
  },
};
</script>

<style lang="less">
.page {
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: stretch;
}

.getcode {
  cursor: pointer;
  margin-left: 15px;
  display: inline-block;
}

.getcode-loading {
  display: inline-block;
  margin-left: 15px;
  color: #666;
}

.top {
  padding-top: 57px;
  height: 160px;
  position: relative;
  background-color: #f3f7fd;
}

.back {
  .mu-button-wrapper {
    padding-left: 10px;
  }
  position: absolute;
  top: 15px;
  left: 23px;
  font-size: 16px;
  color: #4a4a4a;
  font-weight: bold;
}

.back-img {
  cursor: pointer;
  width: 16px;
  margin-right: 15px;
}

.bottom {
  flex: 1;
  background-color: white;
  padding-top: 40px;
}

.bottom-main {
  width: 650px;
  margin: 0 auto;
}

.settings-item {
  margin-bottom: 27px;

  .title {
    color: #757575;
    width: 120px;
    margin-right: 20px;
  }

  .content {
    flex: 1;
  }
}

.edit-img {
  color: #5c5c5c;
  width: 18px;
  cursor: pointer;
}
</style>
